<template>
  <div class="menber-order-detail">
    <x-tabs v-model="activeName" @tabClick="changeTab">
      <x-tabs-panel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      ></x-tabs-panel>
    </x-tabs>
    <!-- 一个列表根据选项筛选即可，不用放到panel里生成7个 -->
    <div class="order-list">
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <order-item
        v-for="item in orderList"
        :key="item.id"
        :order="item"
        @onCancel="orderCancel"
        @onDelete="orderDelete"
        @onConfirm="orderConfirm"
        @onLogistics="orderLogistics"
      ></order-item>
    </div>
    <!-- 分页 -->
    <page-ination
      :currentPage="reqParams.page"
      :pageSize="reqParams.pageSize"
      :totalComment="total"
      @currentChange="reqParams.page = $event"
    ></page-ination>
  </div>
  <!-- 取消组件。这里放在父组件内，而不放在子组件内。因为如果放在子组件内，要取消时，子组件会不断的遍历查找需要取消的订单的子组件的取消组件 -->
  <!-- 性能大幅度下降，这里在子组件使用自定义方法emits，直接调用一次order-cancel组件 -->
  <order-cancel ref="cancelTarget"></order-cancel>
  <!-- 物流组件 -->
  <order-logistics ref="logisticsTarget"></order-logistics>
</template>

<script>
import { orderStatus } from "api/constants.js";
import { reactive, ref, watch } from "vue";
import OrderItem from "./components/OrderItem.vue";
import { findOrderList } from "api/member";
import { deleteOrder, confirmOrder } from "api/order";
import OrderCancel from "./components/OrderCancel.vue";
import Comfirm from "components/common/confirm";
import Toast from "components/common/toast";
import OrderLogistics from "./components/OrderLogistics.vue";

export default {
  name: "MemberOrderDetail",
  components: {
    OrderItem,
    OrderCancel,
    OrderLogistics,
  },
  setup() {
    const activeName = ref("all");
    // 查询订单参数
    const reqParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0,
    });
    // 订单列表
    const orderList = ref([]);
    //加载状态
    const loading = ref(false);
    //分页
    const total = ref(0);
    //获取列表
    const getOrderList = () => {
      loading.value = true;
      // 查询订单
      findOrderList(reqParams).then((data) => {
        orderList.value = data.result.items;
        total.value = data.result.counts;
        loading.value = false;
      });
    };

    //这里用watch而将其放在changeTab是为了当页面变化时也触发，就不用重复写了
    watch(
      reqParams,
      () => {
        getOrderList();
      },
      { immediate: true }
    );

    //条件查询
    const changeTab = ({ index }) => {
      reqParams.page = 1;
      reqParams.orderState = index;
    };

    //删除订单
    const orderDelete = (order) => {
      Comfirm({ text: "您确认删除该条订单吗？" })
        .then(() => {
          deleteOrder(order.id).then(() => {
            Toast({ type: "success", text: "删除订单成功" });
            getOrderList();
          });
        })
        .catch(() => {});
    };

    return {
      activeName,
      changeTab,
      orderStatus,
      orderList,
      reqParams,
      loading,
      total,
      orderDelete,
      ...useConfirm(),
      ...useLogistics(),
      ...useCancel(),
    };
  },
};
//查看物流
export const useLogistics = () => {
  const logisticsTarget = ref(null);
  const orderLogistics = (order) => {
    logisticsTarget.value.open(order);
  };

  return { logisticsTarget, orderLogistics };
};
//取消订单
export const useCancel = () => {
  const cancelTarget = ref(null);
  const orderCancel = (order) => {
    //传值给open方法，让他拿到order
    cancelTarget.value.open(order);
  };

  return { cancelTarget, orderCancel };
};

//确认订单
//http://pcapi-xiaotuxian-front-devtest.itheima.net//member/order/consignment/1394116427400613890
export const useConfirm = () => {
  const orderConfirm = (order) => {
    Comfirm({ text: "您确认收货吗？" })
      .then(() => {
        confirmOrder(order.id).then(() => {
          Toast({ type: "success", text: "确认收货成功" });
          order.orderState = 4;
        });
      })
      .catch(() => {});
  };

  return { orderConfirm };
};
</script>

<style lang="less" scoped>
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9) url(~assets/images/loading.gif) no-repeat
    center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>